<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Live input record and playback</title>
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
</head>

<body>
<script src="../assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
  <h1>Recorder.js simple WAV export example</h1>

  <p>Make sure you are using a recent version of Google Chrome.</p>
  <p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p>

  <button onclick="startRecording(this);">开始录音</button>
  <button onclick="stopRecording(this);" disabled>停止</button>
  
  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>
  
  <h2>Log</h2>
  <pre id="log"></pre>

  <script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;

  var startUserMedia=function (stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');

    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');
    
    recorder = new Recorder(input);
    __log('Recorder initialised.');
  }

  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');
    
    // create WAV download link using audio data blob
    createDownloadLink();
    
    recorder.clear();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
          var fd = new FormData();

                fd.append("userId",1000010);
                fd.append('file', blob);
                // var xhr = new XMLHttpRequest();
                $.ajax({
                    contentType:"multipart/form-data",
                    type:"POST",
                    url:"http://119.23.79.36:8080/upload/UploadVoiceServlet",//192.168.0.128:8888/upload/UploadServlet" AppConfig.uploadVoiceUrl
                    data:fd,
                    dataType:"json",
                    processData:false,
                    contentType:false,
                    success:function(result){
                        alert(result["url"]);
                     
                     var url = result["url"];
                      var li = document.createElement('li');
                      var au = document.createElement('audio');
                      var hf = document.createElement('a');
                      
                      au.controls = true;
                      au.src = url;
                      hf.href = url;
                      hf.download =url;
                      hf.innerHTML = hf.download;
                      li.appendChild(au);
                      li.appendChild(hf);
                      recordingslist.appendChild(li);
                        // audioData.buffer=[];
                        // audioData.size=0;
                        // context.close();
                    }
                });

      /*var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);*/
    });
  }

  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
      // __log('Audio context set up.');
      // __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
         alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      // __log('No live audio input: ' + e);
    });
  };
  </script>

  <script src="./dist/recorder.js"></script>
</body>
</html>
